<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>房源管理</el-breadcrumb-item>
        <el-breadcrumb-item>租房管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
             <el-row :gutter="25">
              <el-col :span="8">
                  <el-date-picker
                    v-model="dataValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="创建开始时间"
                    end-placeholder="创建结束时间"
                    size="small"
                    :picker-options="pickerOptions"
                    @change="initTime"
                    format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
              </el-col>
              <el-col :span="4">
                  <el-select v-model="queryParams.status" filterable clearable placeholder="请求状态" size="small">
                    <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.keyDesc"
                    :value="item.value">
                    </el-option>
                </el-select>

              </el-col>
              <el-col :span="2" >
                  <el-button size="small" type="success" @click="queryPage" icon="el-icon-search" v-if="permissionStrValue.indexOf('rentHouse:query') !== -1">查询</el-button>
              </el-col>
            </el-row>

            <el-table :data="list" border stripe width="100%">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="订单编号" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.code }}</span>
                </template>
            </el-table-column>
            <el-table-column label="房源名称" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{scope.row.houseTitle}}</span>
                </template>
            </el-table-column>
            <el-table-column label="租客姓名" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.rentUsername }}</span>
                </template>
            </el-table-column>
            <el-table-column label="租客手机" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.rentUserPhone}}</span>
                </template>
            </el-table-column>
            <el-table-column label="合同起止时间" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.promiseTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="租金" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.rent}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.status}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                 <template slot-scope="scope">
                     <el-button type="primary" size="small" @click="info(scope.row)" icon="el-icon-edit" v-if="permissionStrValue.indexOf('rentHouse:info') !== -1">详情</el-button>
                 </template>
            </el-table-column>
        </el-table>
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <el-dialog title="订单详情" :visible.sync="infoFlag" width="70%">
        <span style="color:#409EFF">订单状态：{{infoItem.status}}</span>
       <el-divider></el-divider>
        <el-form :model="infoItem" label-width="80px" >
          <span style="color:red">房源信息</span>
          <el-form-item label="订单编号">
              <el-input v-model="infoItem.code" style="width:200px" size="small" disabled ></el-input>
          </el-form-item>
        <el-form-item label="房源标题" >
            <el-input v-model="infoItem.houseTitle" style="width:400px" size="small" disabled ></el-input>
        </el-form-item>
        <el-row>
            <el-col :span="10">
                <el-form-item label="小区地址">
                    <el-input v-model="infoItem.address" style="width:300px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="房屋配置">
                    <el-input v-model="infoItem.facilities" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            
        </el-row>
        <span style="color:red">房东信息</span>
        <el-row>
            <el-col :span="8">
                <el-form-item label="房主姓名">
                    <el-input v-model="infoItem.hostName" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="房主电话">
                    <el-input v-model="infoItem.hostPhone" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            
        </el-row>
        <span style="color:red">租客信息</span>
        <el-row>
            <el-col :span="8">
                <el-form-item label="租客姓名">
                    <el-input v-model="infoItem.rentUsername" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="租客电话">
                    <el-input v-model="infoItem.rentUserPhone" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
         <span style="color:red">合同信息</span>
        <el-row>
            <el-col :span="8">
                <el-form-item label="合同起止时间" label-width="100px">
                    <el-input v-model="infoItem.promiseTime" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="租金">
                    <el-input v-model="infoItem.rent" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="infoFlag = false">关 闭</el-button>
      </span>
      </el-dialog>

        </el-card>

    </div>
    
</template>
<script>
export default {
    name: 'RentHouse',
    data() {
        return {
            dataValue: '',
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },
            queryParams: {
                createTimeStart: '',
                createTimeEnd: '',
                status: '',
                code: '',
                currPage: 1,
                pageSize: 10
            },
            total: 0,
            statusList: [],
            list: [],
            infoItem: {
                id: '',
                code: '',
                houseTitle: '',
                address: '',
                facilities: '',
                rentUsername: '',
                rentUserPhone: '',
                hostName: '',
                hostPhone: '',
                promiseTime: '',
                rent: '',
                status: ''
            },
            infoFlag: false,
            permissionStrValue: ''

        }
    },
    created() {
        this.queryPage();
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();
    },
    methods: {
        async queryPage() {
            const{data: res} = await this.$http.post('/house/rent-house/list-page', JSON.stringify(this.queryParams), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.list = res.data;
            this.total = res.total;
        },
        handleSizeChange(newPageSize) {
            this.queryParams.pageSize = newPageSize;
            this.queryPage();
        },
        handleCurrentChange(newPage) {
            this.queryParams.currPage = newPage;
            this.queryPage();

        },
        //订单状态
       async getStatusList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '订单状态';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.statusList = res.data

        },
        initTime(val) {
            if(val !== null) {
               this.queryParams.createTimeStart = val[0];
               this.queryParams.createTimeEnd = val[1];
            }
        },
        info(item) {
            this.infoItem.id = item.id;
            this.infoItem.code = item.code;
            this.infoItem.status = item.status;
            this.infoItem.houseTitle = item.houseTitle;
            this.infoItem.address = item.address;
            this.infoItem.facilities = item.facilities;
            this.infoItem.rentUsername = item.rentUsername;
            this.infoItem.rentUserPhone = item.rentUserPhone;
            this.infoItem.hostName = item.hostName;
            this.infoItem.hostPhone = item.hostPhone;
            this.infoItem.promiseTime = item.promiseTime;
            this.infoItem.rent = item.rent + "元/月"
            this.infoFlag = true;
        }

    }
}
</script>

<style scoped>

</style>